<template>
	<m-layout title="评价中心">
		<text slot="right" style="font-size: 30rpx;color: #FA2B47;" @click="verify">提交</text>
		<m-block spa="24" gap="40 30">
			<view class="top flex">
				<view style="margin-right: 25rpx;">轻点给个评价呗</view>
				<uni-rate v-model="rateValue"/>
				<view style="margin-left: 50rpx;">{{reteGrade[rateValue]}}</view>
			</view>
			<view class="feedback_box">
				<view class="flex" style="align-items: flex-start;">
					<textarea v-model="commentContent" @input="changeContent" style="margin-left: 5rpx;" placeholder-class="placeholder" placeholder="请输入评价内容,不填则默认好评" />
				</view>
				<view style="margin-bottom: 22rpx;">已写<text style="color: #FA2B47;">{{contentLength}}</text>个字</view>
				<uploadPhoto v-model="imgList"></uploadPhoto>
			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { Comment } from '@/api/Order.js'
	export default {
		data() {
			return {
				orderId:'',
				rateValue: 0,
				commentContent: '',
				imgList:[],
				reteGrade: {
					1:'非常差',
					2:'差',
					3:'一般',
					4:'好',
					5:'非常好',
				},
				contentLength: 0
			};
		},
		onLoad({orderId}) {
			this.orderId = orderId;
		},
		methods:{
			///////////////////////////////////// 事件监听 ////////////////////////////////////////
			// 内容监听
			changeContent(e){
				this.contentLength = e.detail.cursor;
				this.commentContent = e.detail.value;
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			async verify(){
				if(this.rateValue<=0){
					return this.Toast('轻点给个评价吧！')
				}
				const {success} = await Comment({
					orderid:this.orderId,
					gvalue:this.rateValue,
					content:this.commentContent,
					picurls:this.imgList.toString() || `${'""'}`,
				})
				if(success){
					this.Toast('操作成功');
					setTimeout(()=>{
						this.Jump()
					},2000)
				}
			},
			
		}
	}
</script>

<style lang="scss">
.top{
	border-bottom: 1px solid #EEEEEE;
	padding-bottom: 34rpx;
	margin-bottom: 40rpx;
}
.feedback_box{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	
	.placeholder{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	.feedback_img_no{
		background: #F6F6F6;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding: 44rpx 0;
	}
}
</style>
